<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>团课订单</title>

		<style>
			.top-ctnt{
				background-color: #dcdcdc;
				padding: 5px;
				text-align: center;
				color: #42455c;
				font-size: 14px;
			}
			.content ul{
				margin-top: 10px;
				background-color: #fff;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
			}
			.content ul li{
				padding: 10px;
				padding-left: 0;
				margin-left: 10px;
				border-bottom: 1px solid #dcdcdc;
				overflow: hidden;
			}
			.content ul li:last-child{
				border-bottom: none;
			}
			.content ul li span{
				display: inline-block;
			}
			.content ul li .left{
				float: left;
				font-size: 14px;
				color: #42455c;
				display: inline-block;
				width: 65px;
			}
			.arrow{
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/* class-detail */
			ul.class-detail{
				margin-top: 0;
			}
			.class-detail li .left{
				margin-right: 20px;
			}
			.class-detail li .right{
				display: block;
				width: 60%;
				font-size: 14px;
				color: #b4b4b4;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.class-detail li span{
				float: left;
			}
			/** order-num **/
			.class-detail .order-num .left{
				color: #42455c;
			}
			.class-detail .order-num .right{
				display: block;
				width: 60%;
				font-size: 14px;
				color: #b4b4b4;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			/** class-msg **/
			.class-detail .class-msg .right .msg-item{
				display: block;
				padding-bottom: 5px;
				width: 100%;
			}
			.class-detail .class-msg .right .msg-item:last-child{
				padding-bottom: 0;
			}
			.msg-item .msg-item-a{
				margin-right: 10px;
			}
			.msg-item .msg-item-l{
				margin-right: 30px;
			}
			/* class-addr stu-num */
			.class-addr,
			.stu-num{
				position: relative;
			}
			.c-a-l,
			.s-n-l{
				position: absolute;
				left: 0;
				font-size: 14px;
				color: #42455c;
			}
			.c-a-r,
			.s-n-r{
				position: absolute;
				right: 10px;
			}
			.c-a-c,
			.s-n-c{
				margin-left: 80px;
				width: 60%;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.class-addr .c-a-c{
				font-size: 14px;
				color: #b4b4b4;
				line-height: 14px;
			}
			li.buy-num{
				overflow: hidden;
				font-size: 14px;
			}
			.buy-num .b-n-r{
				float: left;
			}
			.buy-num .b-n-c{
				font-size: 14px;
				color: #b4b4b4;
			}
			.buy-num .b-n-r{
				float: right;
			}
			.buy-num .b-n-r .reduce,
			.buy-num .b-n-r .add{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.buy-num .b-n-r .reduce{
				background-image: url(../images/icons/nimus_gray.png);
			}
			.buy-num .b-n-r .to-r{
				background-image: url(../images/icons/minus_green.png);
			}
			.buy-num .b-n-r .add{
				background-image: url(../images/icons/plus_gray.png);
			}
			.buy-num .b-n-r .to-a{
				background-image: url(../image/icons/minus_green.png);
			}
			.buy-num .b-n-r .students{
				margin: 0 10px;
				font-size: 18px;
				font-weight: 600;
				color: #e95656;
				line-height: 20px;
			}
			/* contract */
			ul.contract li{
				position: relative;
				font-size: 14px;
			}
			.con-l{
				position: absolute;
				left: 0;
			}
			.con-r{
				position: absolute;
				right: 10px;
				color: #aaa;
			}
			.con-c{
				margin-left: 80px;
				margin-right: 30px;
				color: #aaa;
			}
			ul.contract .sexual{
				width: 50%;
				margin: 0 auto;
				overflow: hidden;
				
			}
			.s-l{
				float: left;
			}
			.s-r{
				float: right;
			}
			.s-icon{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url(../images/icons/unselect-gesture.png);
				vertical-align: bottom;
			}
			.sexual .select .s-icon{
				background-image: url(../images/icons/select-gesture.png);
			}
			.sexual .man,
			.sexual .woman{
				font-size: 14px;
				line-height: 20px;
			}
			/* stu */
			ul.stu{
				margin-bottom: 65px;
			}
			.stu li a{
				display: block;
				font-size: 14px;
				overflow: hidden;
			}
			.stu li a .stu-l {
				float: left;
				width: 85px;
				color: #42455c;
			}
			.stu li a .stu-c{
				margin-left: 85px;
				margin-right: 5px;
				color: #42455c;
				display: inline-block;
				width: 60%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}
			.stu li a .stu-r{
				float: right;
				color: #b4b4b4;
			}
			/* expect-total */
			ul.expect-total{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
			}
			ul.expect-total li{
				position: relative;
			}
			ul.expect-total li .left{
				float: left;
				display: inline-block;
				color: #000;
				margin-right: 20px;
				line-height: 35px;
			} 
			ul.expect-total li .total{
				float: left;
				font-weight: 600;
				font-size: 18px;
				color: #e95656;
				line-height: 35px;
			}
			ul.expect-total .icon-m{
				font-size: 14px;
				margin-right: 5px;
			}
			.expect-total li button{
				float: right;
				display: inline-block;
				height: 35px;
				width: 110px;
				background-color: #53cecb;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				text-align: center;
				line-height: 35px;
				color: #fff;
				font-size: 16px;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<p class="top-ctnt">客服马上就来跟进预约啦！</p>
			<ul class="class-detail">
				<li class="order-num">
					<span class="left">订单号</span>
					<span class="right order-id">23093409850437</span>
				</li>
				<li class="class-msg">
					<span class="left">课程信息</span>
					<span class="right">
						<span class="msg-item">减肥塑形课</span>
						<span class="msg-item">
							<span class="msg-item-a">08.18周四</span>
							<span class="msg-item-b">16:00-17:00</span>
						</span>
						<span class="msg-item">
							<span class="msg-item-l">¥200/次</span>
							<span class="msg-item-r">60分钟</span>
						</span>
						<span class="msg-item">可免费取消</span>
					</span>
				</li>
				<li class="class-addr">
					<span class="c-a-l">上课地点</span>
					<span class="c-a-c">朝阳公园会馆</span>
					<span class="c-a-r arrow"></span>
				</li>
				<li class="buy-num">
					<span class="b-n-l">购买数量</span>
					<span class="b-n-r">
						<span class="reduce to-r"></span>
						<span class="students">3</span>
						<span class="add"></span>
					</span>
				</li>
			</ul>
			<ul class="contract">
				<li>
					<span class="con-l">联系人</span>
					<span class="con-c">沈宏明</span>
					<span class="con-r arrow"></span>
				</li>
				<li>
					<span class="con-l">联系电话</span>
					<span class="con-c">15897658976</span>	
					<span class="con-r arrow"></span>
				</li>
				<li>
					<div class="sexual">
						<div class="s-l select">
							<span class="s-icon selecte"></span>
							<span class="man">男</span>
						</div>
						<div class="s-r">
							<span class="s-icon"></span>
							<span class="woman">女</span>
						</div>
					</div>
				</li>
			</ul>
			<ul class="stu">
				<li>
					<a id="coupon" href="">
						<span class="stu-l">使用优惠券</span>
						<span class="stu-r arrow"></span>
					</a>
				</li>
				<li>
					<a id="message" href="">
						<span class="stu-l">给老师留言</span>
						<span class="stu-r arrow"></span>
					</a>
				</li>
			</ul>
			<ul class="expect-total">
				<li>
					<span class="left">支付总额</span>
					<span class="total">
						<span class="icon-m">¥</span>400
					</span>
					<button class="confirm-btn" type="button">确认支付</button>
				</li>
			</ul>
		</div>
	</body>
</html>